<template>
    <cf-navigation :backgroundColor="backgroundColor" :borderRadius="borderRadius" :color="color" :list="list" :scan="scan"></cf-navigation>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'

const ins = inject<any>('data')

const list = computed(() => {
    if (!ins.keywords) return []
    else return ins.keywords.map((m: any) => m.keyword)
})

const color = computed(()=>{
    return ins.color || '#333'
})

const backgroundColor = computed(()=>{
    return ins.style.showBackground && ins.style.backgroundColor || '#ffffff'
})

const borderRadius = computed(()=>{
    return ins.style.borderRadius + 'px'
})

const scan = computed(()=>{
    return ins.showScan
})
</script>
